<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/resources/script/jquery.datetimepicker.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/resources/script/fullcalendar-3.0.1/lib/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/resources/script/layer/layer.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/resources/script/jquery.datetimepicker.full.js"></script>
<script type='text/javascript' src='${pageContext.request.contextPath }/dwr/engine.js'></script>
<script type='text/javascript'
	src='${pageContext.request.contextPath }/dwr/interface/meetingRoomBookingService.js'></script>
<script type='text/javascript' src='${pageContext.request.contextPath }/dwr/util.js'></script>
<script type="text/javascript">
	$(document).ready(
			function() {
				$('input').attr('disabled', 'true');
				//设置日期选择器
				$.datetimepicker.setLocale('ch');//日期选择器语言
				$('#datetimepicker1,#datetimepicker2').datetimepicker({
					step : 30,
					format : "Y-m-d H:i",
					timeFormat : "H:m:s"
				});
				//异步获取数据
				meetingRoomBookingService.getBookingInfo(
						parseInt($.request.queryString["id"]), callBack);
				//编辑按钮
				$('#edit').click(function() {
					//JQuery删除某一属性
					$('input').removeAttr('disabled');
				});
				//提交修改
				$('#confirm').click(
						function() {
							layer.prompt({
								title : '请输入验证码',
								formType : 3
							}, function(text, index) {
								layer.load(1, {
									shade : false
								});
								layer.close(index);
								meetingRoomBookingService.updateBooking(
										parseInt($.request.queryString["id"]),
										$('#cname').val(),
										$('#datetimepicker1').val(), $(
												'#datetimepicker2').val(), $(
												'#username').val(), $('#phone')
												.val(), text, updateBack);
							});
						});
				//删除会议
				$('#delete').click(
						function() {
							layer.prompt({
								title : '请输入验证码',
								formType : 3
							}, function(text, index) {
								layer.close(index);
								meetingRoomBookingService.deleteBooking(
										parseInt($.request.queryString["id"]),
										text, deleteCallBack);
							});
						});
				$('#closeIframe').click(function() {
					var index = parent.layer.getFrameIndex(window.name);
					parent.layer.close(index);
				});
			});

	function callBack(jsonObject) {
		$('#cname').val(jsonObject.name);
		$('#datetimepicker1').val(jsonObject.start);
		$('#datetimepicker2').val(jsonObject.end);
		$('#username').val(jsonObject.username);
		$('#phone').val(jsonObject.phone);
	};
	function updateBack(json) {
		layer.closeAll('loading');
		if (json.error != null) {
			layer.msg(json.error);
		} else {
			var index = parent.layer.getFrameIndex(window.name);
			parent.$('#calendar').fullCalendar('removeEvents',
					parseInt($.request.queryString["id"]));
			var event = {
				id : parseInt($.request.queryString["id"]),
				title : $('#cname').val(),
				start : $('#datetimepicker1').val(),
				end : $('#datetimepicker2').val()
			};
			parent.$('#calendar').fullCalendar('renderEvent', event, true);
			parent.layer.close(index);
			parent.layer.msg(json.result);
		}
	};

	function deleteCallBack(json) {
		if (json.error != null) {
			layer.msg(json.error);
		} else {
			//通过id删除事件
			parent.$('#calendar').fullCalendar('removeEvents',
					parseInt($.request.queryString["id"]));
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
			parent.layer.msg(json.result);
		}
	};
	//获取parameters的脚本
	$.request = (function() {
		var apiMap = {};
		function request(queryStr) {
			var api = {};
			if (apiMap[queryStr]) {
				return apiMap[queryStr];
			}
			api.queryString = (function() {
				var urlParams = {};
				var e, d = function(s) {
					return decodeURIComponent(s.replace(/\+/g, " "));
				}, q = queryStr.substring(queryStr.indexOf('?') + 1), r = /([^&=]+)=?([^&]*)/g;
				while (e = r.exec(q))
					urlParams[d(e[1])] = d(e[2]);
				return urlParams;
			})();
			api.getUrl = function() {
				var url = queryStr.substring(0, queryStr.indexOf('?') + 1);
				for ( var p in api.queryString) {
					url += p + '=' + api.queryString[p] + "&";
				}
				if (url.lastIndexOf('&') == url.length - 1) {
					return url.substring(0, url.lastIndexOf('&'));
				}
				return url;
			}
			apiMap[queryStr] = api;
			return api;
		}
		$.extend(request, request(window.location.href));
		return request;
	})();
</script>

<style type="text/css">
body {
	font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
}

button, input {
	border: 1px solid #999;
	padding: 5px 10px;
	/* margin: 0 10px 10px 0; */
}

button {
	cursor: pointer;
}
</style>
</head>
<body>
	<div>
		<input id="roomId" type="text" name="roomId" style="display: none"
			value="">
		<table style="border-collapse: separate; border-spacing: 0px 30px;">
			<tr>
				<td><label
					style="vertical-align: middle; display: inline-block">会议名称:</label>
				</td>
				<td colspan="3"><input id="cname" type="text"
					style="width: 200px" name="booking.name">
					<button id="edit">修改</button>
					<button id="delete">删除</button></td>
			</tr>
			<!-- <tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr> -->
			<tr>
				<td><label
					style="vertical-align: middle; display: inline-block">开始时间:</label>
				</td>
				<td><input id="datetimepicker1" type="text"
					style="vertical-align: middle; width: 100px" value=''
					name="booking.bookingTimestr"></td>
				<td><label
					style="vertical-align: middle; display: inline-block">&nbsp;结束时间:</label>
				</td>
				<td><input id="datetimepicker2" type="text"
					style="vertical-align: middle; width: 100px" value=''
					name="booking.endTimestr"></td>
			</tr>
			<!-- <tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr> -->
			<tr>
				<td><label>预约人:</label></td>
				<td><input id="username" type="text" style="width: 100px"
					name="booking.userName" /></td>
				<td><label>&nbsp;电话:</label></td>
				<td><input id="phone" type="text" style="width: 100px"
					name="booking.phone" /></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr style="margin-top: 20px">
				<td colspan="2" align="center" rowspan="3"
					style="vertical-align: middle;"><input id="confirm"
					type="button" style="width: 80px" value="确&nbsp;&nbsp;定"></td>
				<td colspan="2" align="center" rowspan="3"
					style="vertical-align: middle;"><button id="closeIframe"
						style="width: 80px">关&nbsp;&nbsp;闭</button></td>
			</tr>
		</table>
		<%-- <%=request.getScheme() + "://" + request.getServerName() + request.getRequestURI() + "?"
					+ request.getQueryString()%>
		<s:debug /> --%>
	</div>
</body>
</html>